import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Modal, Toast, Picker, Button, List, TextareaItem
} from 'antd-mobile';
import { dateFormat } from "../../../model/code";
import http from "../../../model/http";
import code from "../../../model/code"; 
import Header from "../../../components/header/Header";
import './add.less'
const Item = List.Item
function Add() {
    const history = useHistory();
    // 回访类型下拉
    const [visitTypeData,setVisitTypeData] = useState([])
    // 回访方式下拉
    const [visitMethod, setVisitMethod] = useState([])
    // 沟通状态下拉
    const [visitStatus, setVisitStatus] = useState([])

    // 回访类型值
    const [visitTypeVal,setVisitTypeVal] = useState([-1])
    // 回访方式
    const [visitMethodVal,setVisitMethodVal] = useState([-1])
    // 沟通状态
    const [visitStatusVal,setVisitStatusVal] = useState([-1])

    // 回访目的
    const [purpose,setPurpose] = useState('')
    // 回访内容
    const [content, setContent] = useState('')
    const [addTypeVal, setAddTypeVal] = useState([])

    const getDataFunc = async (flag) => {
        const data = await http.post('/feedback/getFeedbackDictType',{
            flag:flag,
            customerCrmId: history.location.state.customerCrmId
        })
        if(flag == 1){
            let newData = data.data.map(item => {
                return {
                    label: item.name,
                    value: item.erp_id
                }
            })
            setVisitStatus(newData)
        }else if(flag == 2){
            // 回访类型
            let newData = data.data.map((item,index) => {
                return {
                    label: item.name,
                    value: item.erp_id ? item.erp_id : 'n'+index,
                    data: item
                }
            })
            setVisitTypeData(newData)
        }else if(flag == 3){
            let newData = data.data.map(item => {
                return {
                    label: item.name,
                    value: item.erp_id,
                    
                }
            })
            setVisitMethod(newData)
        }
    }
    /*渲染完成*/
    useEffect(async () => { 
 
        getDataFunc(1)
        getDataFunc(2)
        getDataFunc(3)
         
    }, [])
     
    // 回访类型
    const getVisitTypeVal = (v) => {
        setVisitTypeVal(v)
        console.log(v)
        let data = visitTypeData.filter(item => { 
            return item.value == v[0]
        })

        setAddTypeVal(data[0].data)
         
        
    }
    // 回访方式
    const getVisitMethodVal = (v) => {
        console.log(v)
        setVisitMethodVal(v)
    }
    // 沟通状态
    const getVisitStatusVal = (v) => {
        setVisitStatusVal(v)

    }
    const addSave = async () => { 
        if(visitTypeVal[0] < 0){ Toast.fail('请选择回访类型'); return };
        if(visitMethodVal[0] < 0){ Toast.fail('请选择回访方式'); return };
        if(visitStatusVal[0] < 0){ Toast.fail('请选择沟通状态'); return };
        if(purpose == ''){ Toast.fail('请输入回访目的'); return }; 
        if(content == ''){ Toast.fail('请输入回访内容'); return }; 
        
        Modal.alert('提示', '确认提交回访记录', [
            { text: '取消' },
            {
              text: '提交', onPress: async () => {
                

                const addRes = await http.post('/feedback/addFeedback',{
                    customerCrmId: history.location.state.customerCrmId,
                    scout_type: addTypeVal.erp_id != undefined ? addTypeVal.erp_id : '',
                    scout_type_name: addTypeVal.name,
                    scout_purpose: purpose,
                    scout_content: content,
                    receive_state: visitStatusVal[0],
                    scout_mode: visitMethodVal[0]
                })
                console.log(addRes)
                if(addRes.code == 0){
                    Toast.success('保存成功')
                        setTimeout(() => {
                        history.push('/returnVisit')
                    }, 500); 
                }else{
                    Toast.fail(addRes.msg)
                }
              }
            }
        ])

        
    }
     
    return (
        <div>
            <div className="v-return-visit-add">
                <div className='body-background-div'></div>
                <List className='g-p5-10 g-bg-f g-bdrs12 g-mb10'>
                    <Item wrap extra={history.location.state.customerName}>回访客户</Item>

                    <Picker data={visitTypeData} cols={1}
                    value={visitTypeVal} onOk={v => getVisitTypeVal(v)}
                    >
                        <Item arrow="horizontal">回访类型</Item>
                    </Picker>
                    <Picker data={visitMethod} cols={1}
                    value={visitMethodVal} onOk={v => getVisitMethodVal(v)}>
                        <Item arrow="horizontal">回访方式</Item>
                    </Picker>
                    <Picker data={visitStatus} cols={1}
                    value={visitStatusVal} onOk={v => getVisitStatusVal(v)}>
                        <Item arrow="horizontal">沟通状态</Item>
                    </Picker>
                    
                </List>
                <List className='g-p5-10 g-bg-f g-bdrs12' style={{marginTop:'10px'}}>
                    <TextareaItem value={purpose} rows={5} count={50} onChange={v => {setPurpose(v)}} className="input-css" placeholder='请输入回访目的...' />
                </List>
                <List className='g-p5-10 g-bg-f g-bdrs12' style={{marginTop:'10px',marginBottom:'20px'}}>
                    <TextareaItem value={content} rows={5} count={50} onChange={v => {setContent(v)}} className="input-css" placeholder='请输入回访内容...' />
                </List>

                <Button className="add-btn" type="primary" onClick={addSave}>提交</Button>
            </div>
            <Header/>
        </div>
    )
}   
export default Add;